<template>
  <div class="fh" style="width: 300px">
    <occupation-table :data="tableData" show-summary>
      <el-table-column prop="职业" label="职业"></el-table-column>
      <el-table-column prop="count" label="人数"></el-table-column>
    </occupation-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useStore } from "vuex";
import occupationTable from "@/components/occupation-table.vue";

const store = useStore();
const datas = ref(store.getters.getAllocationData);
const tableData = ref([]);

watch(
  () => store.state.objectType,
  () => {
    process();
  }
);

const process = () => {
  tableData.value = store.getters.getAllocationData;
};

onMounted(() => {
  process();
});
</script>

<style scoped></style>
